import React from 'react'
import { withRouter } from 'react-router-dom';
import {inject, observer} from 'mobx-react';
import { ListViewPage,TabPage } from 'weaver-mobile-page';
import { Avatar } from 'weaver-mobile';
import {openHrmCard} from '../../util/Utils';
@withRouter
@inject('docStore')
@observer
class DocLog extends React.Component{
    componentDidMount(){
        const {docStore} = this.props
        //日志
        docStore.getLogListData(docStore.chooseLogTabIndex);
        docStore.getLogTabInfo();
    }
    componentWillUnmount(){
        const {docStore} = this.props;
        docStore.chooseLogTab = docStore.logTab && docStore.logTab[0].viewcondition;
        docStore.chooseLogTabIndex = 0;
    }
    getTemplate = (template) =>{
        const newTemp = {
            default: [{
              key: 'log-item',
              render: (data) => {
                if(data.moudlespan==="1"){
                    const { operateuseridspan,operatetypespan,usericonspan,operatedatespan } = data;
                    return (
                        <div key={operatedatespan} className="doc-log-user-item">
                            <div className="user-avatar">
                                <Avatar userId={data.operateuserid} className="user-avatar-img"/>
                            {/* <img src={ "http://192.168.29.203:8088/messager/images/icon_m_wev8.jpg"} alt="" className="user-avatar-img"/> */}
                            </div>
                            <div className="user-item-info-left">
                                <span className="user-item-username"  style={{color:'#55B1F9'}} dangerouslySetInnerHTML={{__html: operateuseridspan}} onClick={()=>openHrmCard(data.operateuserid)}></span>
                                <span className="user-item-data">{operatedatespan}</span>
                                <span className="user-item-status">{operatetypespan}</span>
                            </div>
                        </div>
                    );
                }else if(data.moudlespan==="2"){
                    const { usericonspan,departmentNamespan,jobspan,operateuseridspan,subCompanyNamespan} = data;
                    return(
                        <div key={operateuseridspan} className="doc-log-user-item-nodate">
                            <div className="user-avatar">
                                <Avatar userId={data.operateuserid} className="user-avatar-img"/>
                                {/* <img src={usericonspan || "/messager/images/icon_m_wev8.jpg"} alt="" className="user-avatar-img"/> */}
                            </div>
                            <div className="user-item-info-left">
                                <div className="user-item-username" style={{color:'#55B1F9'}} onClick={()=>openHrmCard(data.operateuserid)}>{operateuseridspan}</div>
                                <div className="user-item-sub">{subCompanyNamespan}</div>
                            </div>
                            <div className="user-item-info-right">
                                <div className="user-item-job">{jobspan}</div>
                                <div className="user-item-deptname">{departmentNamespan}</div>
                            </div>
                        </div>
                    );
                }
              },
            }],
          };
          return newTemp;
    }
    render(){
        const {docStore,path} = this.props,{LogList,logTab,chooseLogTabIndex} = docStore;
        return(
            <div className="wea-doc-log-bg wm-route-layout">
                <div className="wm-route-layout" key="doc-log">
                    <TabPage
                        className="log-tabpage"
                        tabs={logTab}
                        tabProps={{
                            onTabClick:(tab, index) => {
                                docStore.changeLogtab(tab,path);
                            },
                            page:chooseLogTabIndex,
                        }}
                    />
                    <ListViewPage.Normal
                        showCheck
                        className="wea-doc-log-listview-page"
                        store={LogList}
                        withSwipeAction
                        getTemplate={this.getTemplate}
                    />
                </div>
            </div>
        )
    }
}
export default DocLog